import React, {Component} from 'react';
import {
  View,
  Text,
  TouchableOpacity,
  StyleSheet,
  Platform,
  Picker,
  Image,
} from 'react-native';

import Config from '../../config';
import Colors from '../../common/Colors';
import CommonStyles from '../../common/CommonStyles';
import SizeUtils from '../../common/SizeUtils';
import TImage from '../../components/TImage';
import CommonListPage from '../common/CommonListPage';
import {DateUtils} from '../../utils/Utils';
import {SearchBar} from 'react-native-elements';
import SearchItemView from './SearchItemView';

import RequestNewsSeacrhListAction from '../../actions/news/RequestNewsSeacrhListAction';


export default class PlateSearchPage extends CommonListPage {
  constructor(props){
    super(props);
    this.state.type=this.props.pageData.routeData.type;
    this.state.isFist=true;
    this.state.searchText="";
    this.state.data = [];
    this.keyWord='';
  }
  componentDidMount() {
  }

  // _dealEnterPage() {
  //   super._dealEnterPage();
  // }
  _dealLeavePage(){
    this.setState({
      refresh: false,
      leave: true,
      isFist:true,
    });
  }
  _getViewStyle() {
     return {paddingTop:Config.statusBarHeight,
        height:SizeUtils.getWindowSize().height-Config.statusBarHeight,
        backgroundColor:"#ffffff"}
  }
  _getListViewStyle() {
      return {
        width:SizeUtils.getWindowSize().width,
        paddingTop:0,
        height:(SizeUtils.getWindowSize().height - Config.paddingTop-SizeUtils.translateDesignHeightToCode(0)),
        backgroundColor:"#fff"};
  }
  _renderTopView(){
  	return(
      <View style={{height:SizeUtils.translateDesignHeightToCode(100),
          paddingLeft:10,
          borderBottomWidth:SizeUtils.translateDesignNumToCode(3), borderColor:"#f2f2f2",
          flexDirection:"row", alignItems:"center"}}>
        <SearchBar
          noIcon = {true}
          containerStyle = {this._getSearchBarContainerStyle()}
          inputStyle = {{padding:0,height:SizeUtils.translateDesignHeightToCode(62), color:"#000000",
            backgroundColor:"#eeeeee", marginLeft:0, marginRight:0,
            marginTop:2, marginBottom:0, paddingRight:0, paddingLeft:SizeUtils.translateDesignWidthToCode(56),
            fontSize:SizeUtils.translateFontSizeToCode(28)}}
          multiline = {false}
          onSubmitEditing = {() => this._onSubmitEditing()}
          value = {this.state.searchText}
          underlineColorAndroid="transparent"
          returnKeyType = "search"
          blurOnSubmit={true}
          // lightTheme = {true}
          onChangeText={(data)=>{this._onSearchBarChange(data)}}
          clearButtonMode={'always'}
          enablesReturnKeyAutomatically={true}
          placeholder='搜点什么吧' />
        <TouchableOpacity onPress={this._onPressCancel.bind(this)} style={{paddingLeft:SizeUtils.translateDesignWidthToCode(26)}}>
          <Text style={{color:"#42a1fa", fontSize:SizeUtils.translateFontSizeToCode(30),}}>
            取消
          </Text>
        </TouchableOpacity>
        <View style={{position:"absolute",
            top:(SizeUtils.translateDesignHeightToCode(100) - SizeUtils.translateDesignWidthToCode(24))/2,
            left:SizeUtils.translateDesignWidthToCode(30)}}>
        <TImage source={require("../../../resource/images/workhard/search_gray.png")}
          style={{width:28, height:28, }}/>
        </View>
      </View>
    )
  }
  _onSearchBarChange(data) {
    this.keyWord=data;
    this.setState({
      searchText:data,
      isFist:false,
    })
  }
  _onSubmitEditing() {
    this.setRefresh();
    this.doRefresh();
  }
  _onPressCancel() {
    this.keyWord='';
    this.setState({
        data:[],
        searchText:'',
      })
    this.leave();
    this.goBack();
  }

  _onRenderItem(data, index) {
      return(<SearchItemView key={index} pageData={this.props.pageData} keyWord={this.keyWord} data={data} index={index} type={this.state.type} />)
  }
  _getSearchBarContainerStyle() {
    return {width:SizeUtils.translateDesignWidthToCode(620), borderTopWidth:0,borderBottomWidth:0,
      height:SizeUtils.translateDesignHeightToCode(62),paddingLeft:-4,backgroundColor:"#00000000",};
  }
  _requestData(page, listView) {
      if (this.keyWord.length>0) {
        new RequestNewsSeacrhListAction().call(listView, {page:page,page_size:10,key:this.keyWord,type:this.state.type})
      }
  }

}